<template>
  <div class="home-view-user-register">
    <el-form class="home-view-form"
             name="ruleForm"
             ref="ruleForm"
             :model="ruleForm"
             :rules="rules">
      <el-form-item prop="username">
        <el-input class="home-view-form-input"
                  type="text"
                  v-model="ruleForm.username"
                  placeholder="请输入账号"/>
      </el-form-item>


      <el-form-item>
        <el-input type="text"
                  v-model="ruleForm.code"
                  style="width: 45%!important;float: left"
                  placeholder="输入验证码"/>
        <div class="login-wrap">
          <img :src="codeUrl" @click="getCode" class="login-code-img" alt=""/>
        </div>
      </el-form-item>




      <el-form-item prop="password">
        <el-input class="home-view-form-input"
                  type="text"
                  v-model="ruleForm.password"
                  placeholder="请输入密码"/>
      </el-form-item>
      <el-button class="form-button" @click="register('ruleForm')">注册</el-button>
    </el-form>
  </div>
</template>

<script>
import {userGetCode} from "@/apis/common";
import {userRegister} from "@/apis/common";


export default {
  components: {},
  props: {},
  data() {
    return {
      codeUrl: '',

      // 表单
      ruleForm: {
        password: '',
        code: '',
        uuid: '',
        avatar: '',
        cid: '',
        roleId: '',
      },

      code: '',
      rules: {
        username: [
          {required: true, message: "不能为空", trigger: "blur"},
        ],
        password: [
          {required: true, message: "不能为空", trigger: "blur"},
        ],
      }
    }
  },
  created() {

    this.init()
  },
  methods: {
    // 初始化资源
    async init() {
      // 初始化验证码图片
      this.codeUrl = require('@/assets/images/get_code.png')
    },

    // 获取验证码
    getCode() {
      userGetCode().then(resp => {
        if (resp?.data?.code === 1) {
          this.codeUrl = "data:image/gif;base64," + resp?.data?.data?.img;
          this.ruleForm.uuid = resp?.data?.data?.uuid;
          // this.code = resp?.data?.data?.code
        }
      });
    },

    // 注册
    register(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          userRegister(this.ruleForm).then(resp => {
            if (resp?.data?.code === 1) {
              this.$message.success("注册成功")
              // 注册成功 跳转到登录页面
              this.$router.push({
                name: 'login',
              }).catch(r => console.log(r))
              // 清空
              this.ruleForm = {}
              console.log("注册成功，" + resp)
            } else {
              this.$message.error(resp?.data?.msg)
            }
          })
        } else {
          this.$message.error("登录失败，请稍后重试!")
          this.loginSpan = true
          return false;
        }
      });


    }


  },
}
</script>
<style scoped lang="scss">


.home-view-form {
  margin-top: 20px;

  .form-button {
    margin-top: 10%;
    width: 40%;
    margin-left: 30%;
  }
}

.login-code-img {
  width: 100%;
  border: 1px black solid;
}

.login-wrap {
  float: left;
  position: relative;
  background-size: cover;
  margin-left: 15%;
  width: 40%;
  height: 40px;
}

::v-deep .el-form-item {
  width: 80%;
  margin-left: 10%;

}
</style>